<template>
    <view>
        <view class="html2canvas" :prop="domId" :change:prop="html2canvas.create">
            <slot></slot>
        </view>
    </view>
</template>

<script>
    import { base64ToPath } from '@/utils/image-tools.js';
    export default {
        name: 'html2canvas',
        props: {
            domId: {
                type: String,
                required: true
            }
        },
        methods: {
            async renderFinish(base64) {
                try{
                    const imgPath = await base64ToPath(base64, '.jpeg');
                    console.log(imgPath)
                    this.$emit('renderFinish', imgPath);
                }catch(e){
                    //TODO handle the exception
                    console.log('html2canvas error', e)
                }
            },
            showLoading() {
                uni.showLoading()
            },
            hideLoading() {
                uni.hideLoading();
            }
        }
    }
</script>

<script module="html2canvas" lang="renderjs">
import html2canvas from 'html2canvas';
export default {
    methods: {
        async create(domId) {
            try {
                const timeout = setTimeout(async ()=> {
                    const shareContent = document.querySelector(domId);
                    const canvas = await html2canvas(shareContent,{
                        width: shareContent.offsetWidth,//设置canvas尺寸与所截图尺寸相同，防止白边
                        height: shareContent.offsetHeight,//防止白边
                        logging: true,
                        useCORS: true
                    });
                    const base64 = canvas.toDataURL('image/jpeg', 1);
                    this.$ownerInstance.callMethod('renderFinish', base64);
                    clearTimeout(timeout);
                }, 500);
            } catch(error){
                console.log(error)
            }
        }
    }
}
</script>


<style lang="scss">

</style>